<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
         $(function(){
             $("#btnSay").click(function(){
                 var text = $("#inValue").val();
                 var worldText = $(".word");
                 //console.log(text);
                 var index = 0;
                 var arr = text.split("");

                 var timer = null;
                 clearInterval(timer);
                 $(".typed-cursor").show();
                 timer =  setInterval(function () {
                     /*if(index < arr.length) {
                     worldText.text(worldText.text() + arr[index]);
                     index++;
                     }else{
                         $(".typed-cursor").hide();
                         clearInterval(timer);
                     }*/

                     if(index > arr.length -1 ){
                         $(".typed-cursor").hide();
                        // return ;
                         clearInterval(timer);
                     }
                     worldText.text(worldText.text() + arr[index]);
                     index++;
                 },200);
             })
         })
    </script>
</head>
<body>
<div class="wrap">
    <h1>
        You want to say ： <span class="word"></span>
                           <span class="typed-cursor">|</span> ！
    </h1>
    <div class="saySection">
        <input type="text" id="inValue" class="txtSay" />
        <input type="button" value="Say" id="btnSay" class="btnSay" />
    </div>
</div>
</body>
</html>